<template>
  <view class="admin-container">
    <view class="sidebar">
      <view class="logo-container">
        <image :src="url('logoalpha','','jpg')" class="logo-image" alt="LOGO" mode="aspectFit"></image>
        <view class="logo-text">墨枢后台管理系统</view>
      </view>
      <view class="menu">
        <view 
          v-for="(item, index) in menuList" 
          :key="index"
          class="menu-item"
          :class="{ active: currentMenu === item.path }"
          @click="handleMenuClick(item)"
        >
          <text class="bi" :class="item.icon"></text>
          <text class="menu-text">{{ item.name }}</text>
        </view>
      </view>
      <view class="sidebar-footer">
        <text class="version">版本 v1.0.0</text>
      </view>
    </view>
    <view class="main-content">
      <view class="header">
        <view class="header-left">
          <text class="page-title">{{ currentPageTitle }}</text>
        </view>
        <view class="user-info">
          <view class="user-avatar">
            <text class="avatar-text">{{ getUserInitial }}</text>
          </view>
          <text class="username">{{ adminStore.userInfo?.username }}</text>
          <text class="logout" @click="handleLogout">退出登录</text>
        </view>
      </view>
      <view class="content">
        <Dashboard v-if="currentMenu === 'dashboard'" />
        <UserManage v-if="currentMenu === 'user'" />
        <ProductManage v-if="currentMenu === 'product'" />
        <OrderManage v-if="currentMenu === 'order'" />
        <CommentManage v-if="currentMenu === 'comment'" />
        <MerchantAudit v-if="currentMenu === 'merchant-audit'" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAdminStore } from '@/stores/admin'
// #ifdef H5 || APP-PLUS
import UserManage from './user-manage.vue'
import ProductManage from './product-manage.vue'
import CommentManage from './comment-manage.vue'
import Dashboard from './dashboard.vue'
import MerchantAudit from './merchant-audit.vue'
import OrderManage from './order-manage.vue'
// #endif

// #ifdef MP-WEIXIN
import UserManage from '@/pages/other/admin/user-manage.vue'
import ProductManage from '@/pages/other/admin/product-manage.vue'
import CommentManage from '@/pages/other/admin/comment-manage.vue'
import Dashboard from '@/pages/other/admin/dashboard.vue'
import MerchantAudit from '@/pages/other/admin/merchant-audit.vue'
import OrderManage from '@/pages/other/admin/order-manage.vue'
// #endif

const url = $url
const adminStore = useAdminStore()
const currentMenu = ref('dashboard')

const menuList = [
  { name: '数据概览', path: 'dashboard', icon: 'bi bi-speedometer2' },
  { name: '用户管理', path: 'user', icon: 'bi bi-people' },
  { name: '商品管理', path: 'product', icon: 'bi bi-box' },
  { name: '订单管理', path: 'order', icon: 'bi bi-cart-check' },
  { name: '评论管理', path: 'comment', icon: 'bi bi-chat-dots' },
  { name: '商家审核', path: 'merchant-audit', icon: 'bi bi-shield-check' }
]

const currentPageTitle = computed(() => {
  const menu = menuList.find(item => item.path === currentMenu.value)
  return menu ? menu.name : '数据概览'
})

const getUserInitial = computed(() => {
  if (adminStore.userInfo?.username) {
    return adminStore.userInfo.username.substring(0, 1).toUpperCase()
  }
  return 'A'
})

const handleMenuClick = (item) => {
  currentMenu.value = item.path
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        adminStore.clearUserInfo()
        uni.navigateTo({
          url: '/pages/other/admin/login'
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>

.admin-container {
  display: flex;
  height: 100vh;
  .sidebar {
    width: 260rpx;
    background: linear-gradient(180deg, #001529 0%, #003366 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    
    .logo-container {
      height: 160rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20rpx 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      
      .logo-image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
      
      .logo-text {
        margin-top: 10rpx;
        font-size: 28rpx;
        font-weight: 600;
      }
    }
    
    .menu {
      flex: 1;
      padding: 20rpx 0;
      
      .menu-item {
        height: 90rpx;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        margin: 10rpx 0;
        border-radius: 0 30rpx 30rpx 0;
        transition: all 0.3s;
        cursor: pointer;
        
        &:hover {
          background-color: rgba(24, 144, 255, 0.1);
        }
        
        &.active {
          background-color: rgba(24, 144, 255, 0.2);
          color: #1890ff;
          margin-right: 20rpx;
          
          &::before {
            content: '';
            position: absolute;
            left: 0;
            width: 6rpx;
            height: 90rpx;
            background-color: #1890ff;
            border-radius: 0 3rpx 3rpx 0;
          }
          
          .bi {
            color: #1890ff;
          }
        }
        
        .bi {
          font-size: 36rpx;
          margin-right: 20rpx;
          color: rgba(255, 255, 255, 0.65);
          transition: color 0.3s;
        }
        
        .menu-text {
          font-size: 28rpx;
          color: rgba(255, 255, 255, 0.85);
          transition: color 0.3s;
        }
      }
    }
    
    .sidebar-footer {
      padding: 20rpx;
      font-size: 24rpx;
      text-align: center;
      color: rgba(255, 255, 255, 0.45);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
  
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .header {
      height: 100rpx;
      background-color: #fff;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
      
      .header-left {
        .page-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
      }
      
      .user-info {
        display: flex;
        align-items: center;
        
        .user-avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #1890ff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 15rpx;
          
          .avatar-text {
            color: #fff;
            font-size: 28rpx;
            font-weight: 600;
          }
        }
        
        .username {
          font-size: 28rpx;
          color: #333;
          margin-right: 30rpx;
        }
        
        .logout {
          font-size: 28rpx;
          color: #1890ff;
          cursor: pointer;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    
    .content {
      flex: 1;
      padding: 30rpx;
      background-color: #f0f2f5;
      overflow-y: auto;
    }
  }
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .admin-container {
    .sidebar {
      width: 160rpx;
      
      .logo-text {
        font-size: 24rpx;
      }
      
      .menu-item {
        .menu-text {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style> 